<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img id="img1" src="./img/001.gif" alt="">
        <button id="btn">开始</button>
        <button id="btn2">暂停</button>

    </div>
    <script>
        var img1 = document.getElementById('img1')
        // var btn = document.getElementById('btn')
        // var btn2 = document.getElementById('btn2')
        var timer;//定义一个变量保存定时器的表示


        var imgarr = ["./img/001.gif", "./img/002.gif", "./img/003.gif",]
        var index = 0;

        //开始按钮
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            clearInterval(timer)

            timer = setInterval(() => {
                index++
                if (index >= imgarr.length) {
                    index = 0
                }
                img1.src = imgarr[index]
            }, 1000);
        }


        //暂停按钮
        var btn2 = document.getElementById('btn2')
        btn2.onclick = function () {
            clearInterval(timer)
        }

    </script>
</body>


</html>